<template>
    <el-row :gutter="20">
        <el-col :span="5" :xs="24">
            <el-card class="card">
                <div slot="header">商户数量</div>
                <div class="count">{{ data.storeCount }} 家</div>
                <img src="../../../assets/icons/order.png" />
                <div class="bottom">
                    <div class="title">昨日新增</div>
                    <div class="number">{{ data.yStoreCount  }} 家</div>
                </div>
            </el-card>
        </el-col>
        <el-col :span="5" :xs="24">
            <el-card class="card">
                <div slot="header">今日订单金额</div>
                <div class="count">{{ data.tOrederPrice  }} 元</div>
                <img src="../../../assets/icons/user.png" />
                <div class="bottom">
                    <div class="title">昨日订单金额</div>
                    <div class="number">{{ data.yOrederPrice }} 笔</div>
                </div>
            </el-card>
        </el-col>

        <el-col :span="5" :xs="24">
            <el-card class="card">
                <div slot="header">本月订单金额</div>
                <div class="count">{{ data.tmOrederPrice  }} 元</div>
                <img src="../../../assets/icons/user.png" />
                <div class="bottom">
                    <div class="title">上月订单金额</div>
                    <div class="number">{{ data.ymOrederPrice }} 元</div>
                </div>
            </el-card>
        </el-col>

        <el-col :span="5" :xs="24">
            <el-card class="card">
                <div slot="header">待审核订单</div>
                <div class="count">{{ data.validOrderCount }}</div>
                <img src="../../../assets/icons/store.png" />
                <div class="bottom">
                    <div class="title">今日新增</div>
                    <div class="number">{{ data.tValidOrderCount }} 笔</div>
                </div>
            </el-card>
        </el-col>
       
        <el-col :span="4" :xs="24">
            <el-card class="card">
                <div slot="header">客户投诉量</div>
                <div class="count">{{ data.feedBackCount}} 个</div>
                <img src="../../../assets/icons/price.png" />
                <div class="bottom">
                    <div class="title">未处理投诉</div>
                    <div class="number">{{ data.noFeedBackCount}}  个</div>
                </div>
            </el-card>
        </el-col>
        
    </el-row>
</template>

<script>
import request from '@/utils/request'
export default {
    data() {
        return {
            data: {}
        }
    },
    mounted() {
        this.load()
    },
    methods: {
        async load() {
            this.data = await request.get(`admin-count/home`)
        }
    }
}
</script>

<style lang="scss" scoped>
.count{font-size: 24px; font-weight: 500;}
.card{
    position: relative;
    margin-top: 15px;
}
img{
    position: absolute;
    width: 40px;
    height: 40px;
    right: 20px;
    bottom: 50px;
}
.bottom{
    margin-top: 14px;
    display: flex;
    justify-content: space-between;
    
}
</style>